<template>
  <div class="page-detail">
    <!-- <el-row>
      <el-col :span="24">
        <crumbs :keyword="keyword" :type="type" />
      </el-col>
    </el-row> -->
    <el-row>
      <el-col :span="24">
        <!-- <summa :meta="product"/> -->
        <itemtop
          :basicInfo="basicInfo"
          :imgList="imgList"
          :specs="specs"
          :getDetailsData="getDetailsData"
        />
      </el-col>
    </el-row>
    <!-- <el-row class="m-title">
      <el-col :span="24">
        <h3>商家团购及优惠</h3>
      </el-col>
    </el-row> -->
    <el-row>
      <el-col :span="24">
        <itembottom :params="basicInfo" :detailsPic="detailsPic" :attr="attr" :attrValue="attrValue"/>
      </el-col>
    </el-row>
    <!-- <el-row v-if="canOrder || !login">
      <el-col :span="24">
        <list
          v-if="login"
          :list="list"/>
        <div
          v-else
          class="deal-need-login">
          <img
            src="//p0.meituan.net/codeman/56a7d5abcb5ce3d90fc91195e5b5856911194.png"
            alt="登录查看">
          <span>请登录后查看详细团购优惠</span>
          <el-button
            type="primary"
            round>
            <a href="/login">立即登录</a>
          </el-button>
        </div>
      </el-col>
    </el-row> -->
  </div>
</template>

<script>
import Crumbs from "@/components/detail/crumbs.vue";
import Summa from "@/components/detail/summary.vue";
import List from "@/components/detail/list.vue";
import Itemtop from "@/components/detail/itemtop.vue";
import Itembottom from "@/components/detail/itembottom.vue";
import { getDetail } from "@/api/product";
import { formatSpecs } from "@/utils/format"
export default {
  components: {
    Crumbs,
    Summa,
    List,
    Itemtop,
    Itembottom
  },
  data() {
    return {
      id: null,
      basicInfo: {},
      detailsPic: [],
      imgList: [],
      specs: [],
      attr: [],
      attrValue: []
    };
  },
  // computed: {
  //   canOrder: function() {
  //     return this.list.filter(item => item.photos.length).length;
  //   }
  // },
  mounted() {
    try {
      const { id } = this.$route.query || {};
      this.id = id;
      this.getDetailsData({ id });
    } catch (error) {
      console.log(error);
    }
  },

  methods: {
    async getDetailsData(params = {}) {
      let res = await getDetail(params.id);
      try {
        if (res.code === 200) {
          const { product, skuStockList, productAttributeList, productAttributeValueList } = res.data || {};
          this.specs = skuStockList.map(item => {
            return {
              id: item.id,
              productId: item.productId,
              skuCode: item.skuCode,
              price: item.price,
              stock: item.stock,
              lockStock: item.lockStock,
              spData: formatSpecs(item.spData),
              ospData: item.spData
            };
          });
          this.basicInfo = product;
          this.imgList = product.albumPics.split(",");
          this.attr = productAttributeList;
          this.attrValue = productAttributeValueList;
          this.detailsPic = product.detailHtml.split(",");
        }
      } catch (err) {
        console.log(err);
      }
    },
    _objToStrMap(obj) {
      let strMap = new Map();
      for (let k of Object.keys(obj)) {
        strMap.set(k, obj[k]);
      }
      return strMap;
    }
  }
};
</script>

<style lang="scss">
@import "@/assets/css/detail/index.scss";
</style>
